<template>
  <publicList
      ref="publicListRef"
      @toolChange="toolChange"
      :toolList="toolList.toolList"
      :paramsList="toolList.paramsList"
      :selectNums="ids.length"
      :queryParams="toolList.queryParams"
      @searchSubmit="searchSubmit"
      :total="total"
      @paginate="handlePaginateFun"
      :tableData="toolList.tableDataList"
      :columns="toolList.tableItem"
      :loading="loading"
      rowKey="uuid"
      @handleSelectionChange="handleSelectionChange"
  >
    <template v-slot:publicLeft>
      <div style="width: 200px">
        <div class="head-container container-scroll">
          <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick"
          />
        </div>
      </div>
    </template>
    <template v-slot:tableHead="head">
      {{ head.item.label }}
    </template>
    <template v-slot:tableColumn="scope">
      <span v-if="scope.scope.prop=='status'">
        {{ scope.scope.row.status == 1 ? '启用' : '禁用' }}
      </span>
      <span v-else-if="scope.scope.prop=='levelCode'" class="text_decoration" @click="tableRowClick(scope.scope.row)">{{
          scope.scope.row.levelCode
        }}</span>
      <span v-else>{{ scope.scope.row[scope.scope.prop] }}</span>
    </template>
  </publicList>
  <el-dialog
      v-model="dialogVisible"
      title="新增"
      width="40%"
      draggable
      :modal="false"
      :before-close="cancel"
      custom-class="draggable_custom_class"
  >
    <el-form
        ref="brandFormRef"
        label-width="100px"
        :model="form.formData"
        :rules="form.formFules"
    >
      <formLabel
          :publicForm="form.basicForm"
          :formData="form.formData"
          :detailsbool="detailsbool"
          @formSelectEmit="formSelectEmit"
      >
      </formLabel>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" v-if="!detailsbool" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {ref, reactive, computed, getCurrentInstance, watch, onMounted} from "vue"
import {getSerialRuleByName} from "@/api/rules";
import {
  productLineTree,
  productLineAdd,
  productLineEdit,
  productLineList,
  productLineOperate,
  productLineRemove,
  productLineDetails, getBrandList
} from "@/api/brand";
import {tableMixin} from "@/mixins/tableMixin.js"
export default {
  name: "productLine",
  components: {},
  data() {
    return {}
  },
  setup() {


    const detailsbool = ref(false)
    const dialogVisible = ref(false)
    const deptOptions = ref([
      {
        label: '产品线',
        levelType: 0,
        id: -1000,
        children: []
      }
    ])
    const defaultProps = ref({
      children: 'children',
      label: 'label'
    })
    const form = reactive({
      formData: {
        status: true,
        levelCode: '',
        levelName: '', // levelType == 1  为产品线名称     levelType == 2 系列名称
        levelType: '1',
        remark: '',
        pname: '' // levelType == 2  为产品线名称   展示用，不需要传入后台
      },
      basicForm: {
        title: '基本信息',
        isTitle: false,
        showSearch: true,
        data: [
          {
            label: '产品线编码',
            prop: 'levelCode',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: true, //是否禁用
            placeholder: '请输入产品线编码'
          },
          {
            label: '产品线',
            prop: 'levelName',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
          },
          {
            label: '产品线',
            prop: 'pname',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
          },
          {
            label: '系列',
            prop: 'levelName',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
          },
          {
            label: '层级',
            prop: 'levelType',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
            placeholder: '请输入备注'
          },
          {
            label: '状态',
            prop: 'status',
            type: 'switch', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: true, //是否禁用
          },
        ]
      },
      formFules: {
        levelCode: [{
          required: true,
          message: '单据编码不能为空',
          trigger: 'blur',
        }],
        levelName: [{
          required: true,
          message: '产品线不能为空',
          trigger: 'blur',
        }],
      }
    })
    const brandFormRef = ref();
    const toolList = reactive({
      toolList: [
        {id: "3", label: "新增", ismul: false},
        {id: "4", label: "启用", ismul: false},
        {id: "5", label: "禁用", ismul: false},
        // {id: "1", label: "刷新", ismul: false},
      ],
      paramsList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        deptId: undefined,
        parentId: null
      },
      tableDataList: [],
      tableItem: [
        {label: '状态', prop: 'status', align: 'left', width: '80'},
        {label: '编码', prop: 'levelCode', align: 'left', width: '200'},
        {label: '产品线', prop: 'levelName', align: 'left', width: '150'},
        {label: '系列', prop: 'pname', align: 'left', width: '150'},
        {label: '层级', prop: 'levelType', align: 'left', width: '150'},
        {label: '关联商品', prop: 'product', align: 'left', width: '150'},
        {label: '备注', prop: 'remark', align: 'left'},
      ],
    });
    const {proxy} = getCurrentInstance()
    let {
      ids,
      loading,
      publicListRef,
      getTableData,
      total,
      tableDataList,
      searchSubmit,
      handlePaginateFun,
      handleSelectionChange
    } = tableMixin({
      getListApi: productLineList,
      queryParams:toolList.queryParams,
      getListCallBack(res) {
        total.value = res.total;
        toolList.tableDataList =res.rows;
      },
    })
    onMounted(() => {
      getTableData()
    })

    const toolChange = (e) => {
      if (e == '1') {
        searchSubmit();
      } else if (e == '3') {
        detailsbool.value = false;
        dialogVisible.value = true;
      } else if (e == '4' || e == '5') {
        if (ids.value.length <= 0) {
          proxy.$message({
            type: "error",
            message: "请选择需要操作的数据!"
          })
          return false
        }
        let params = {
          idArr: ids.value,
          productStatus: e == '4' ? 2 : 1
        }
        disableGoods(params).then(res => {
          proxy.$message({
            type: "success",
            message: (e == '4' ? '启用' : '禁用') + "成功"
          })
          searchSubmit();
        });
      }
    }

    const submitForm = () => {
      console.log(form.formData)
      brandFormRef.value.validate((valid) => {
        if (valid) {
          // addGoods(form.formData).then(res => {
          proxy.$message({
            type: "success",
            message: "操作成功"
          })
          dialogVisible.value = false;
          getTableData()
          // })
        }
      })
    }
    const cancel = () => {

      dialogVisible.value = false;
      brandFormRef.value.resetFields()
    }
    const tableRowClick = (row) => {
      let params = {
        productNum: row.productNum
      }
      detailsGoods(params).then(res => {
        form.formData = res.data.goods;
        detailsbool.value = form.formData == 2 ? true : false;
        dialogVisible.value = true;
      })
    }

    const formSelectEmit = (val, currentItem, $index, obj) => {

    }
    const getProductLineList = () => {
      productLineTree().then(res => {
        getTableData();
        toolList.queryParams.deptId = res.data[0].id
        deptOptions.value[0].children = res.data
      })
    }
    // 筛选节点
    const filterNode = (value, data) => {
      if (!value) return true
      return data.label.toUpperCase().indexOf(value.toUpperCase()) !== -1
    }
    // 节点单击事件
    const handleNodeClick = (data, sads) => {
      if (data.id != undefined && data.id != -1000) {
        toolList.queryParams.deptId = data.id
      } else {
        toolList.queryParams.deptId = 0
      }
      toolList.queryParams.pageNum = 1
      getTableData(data.id == -1000 ? 0 : data.id)
      if (data.levelType == 2 || (!data.parentId && data.levelType == 1)) {
        this.form.levelType = 2
        let parentId = data.parentId
        let treeFilter = this.deptOptions[0].children.filter(item => item.id == parentId)
        let parentName = treeFilter.length >= 1 ? treeFilter[0].label : data.label
        this.form.pname = parentName
        toolList.queryParams.parentId = treeFilter.length >= 1 ? treeFilter[0].id : data.id
        this.isSeries = 2

      } else if (data.levelType == 1 || data.levelType == 0) {
        this.form.levelType = 1
        toolList.queryParams.parentId = null
        this.isSeries = 1
      }
    }
    getProductLineList();
    return {
      toolList,
      total,
      publicListRef,
      loading,
      ids,
      dialogVisible,
      form,
      brandFormRef,
      detailsbool,
      deptOptions,
      defaultProps,
      submitForm,
      cancel,
      handlePaginateFun,
      toolChange,
      handleSelectionChange,
      searchSubmit,
      tableRowClick,
      formSelectEmit,
      filterNode,
      handleNodeClick
    }
  },
  created() {
  },
  mounted() {
  },

  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">

</style>